<template>
  <div>
    <div class="tab_byns">
        <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>
      </div>
      <div class="tab_content">          
          <el-table
      :data="module"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="algorithm"
        label="算法">
      </el-table-column>
       <el-table-column
        prop="introduce"
        label="介绍"
        width="180">
      </el-table-column>
      
      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="applicationId"
        label="申请号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userId"
        label="作者">
      </el-table-column>
      <el-table-column
        prop="datasetId"
        label="资料组">
      </el-table-column>

       <!-- 操作列 -->
        <el-table-column width="100" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>

    
      </div>
  </div>
</template>
<script>
import {del, get} from "@/utils/request"
export default {
   //定义变量，在模板中直接用
    data(){
        return {
            module:[],
            visible:false
        }
    },
    //定义事件处理函数、方法
    methods:{
        // 删除的处理函数
    deleteHandler(row){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "http://localhost:8888/module/deleteById"
        del(url,{id:row.id}).then(resp =>{
          // 1. 提示
          this.$message({type:"success",message:resp.message});
          // 2. 刷新
          this.loadModule();
        })
        
      })
    },
     // 修改的处理函数
    editHandler(row){
      this.$router.push({ 
        path:"/lilu/moduleform" ,
        query:row
      })
    },
    // 跳转到新增入页面
    toFormHandler(){
      // 跳转
      this.$router.push({ path:"/lilu/moduleform" })
    },
        //查询所有数据
        loadModule(){
            let url = "http://localhost:8888/module/query"
            get(url).then(resp => {
                //获取数据后做的事情
                this.module = resp.data;
                // console.log(this.interfaces);
            })
        }
    },
    //生命周期钩子函数
    created(){
       this.loadModule();
    }
}
</script>

<style lang="sass" scoped>

</style>
